import { getDepartmentList, getDoctorList, getScheduleList } from '@/api/hospital/hospitalList';
import { IBookingScheduleList, IDepartmentList, IDoctorItem, IDoctorList } from '@/api/hospital/model/hospitalListTypes';
import { Button, Card, Col, Pagination, Row, Space, Table, Tag, Tree } from 'antd'
import { ColumnsType } from 'antd/lib/table';
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom';

export default function HospitalSchedule() {
    // 动态计算科室列表div高度
    let height = document.documentElement.clientHeight - 64 * 2 - 55;
    let { hoscode } = useParams();
    // 声明状态
    let [departmentList, setDepartmentList] = useState<IDepartmentList>([])
    // 科室展开节点数组
    let [expandedKeys, setExpandedKeys] = useState<string[]>([])
    // depcode 当前选中科室 code
    let [depcode, setDepcode] = useState<string>()
    // depname 当前科室名
    let [depname, setDepname] = useState<string>()
    // 医院名
    let [hosname, setHosname] = useState<string>()
    // 日期列表
    let [scheduleList, setScheduleList] = useState<IBookingScheduleList>([])
    // 当前排班日期状态
    let [workDate, setWorkDate] = useState<string>()
    // 分页相关状态
    let [page, setPage] = useState<number>(1)
    let [limit, setLimit] = useState<number>(3)
    let [total, setTotal] = useState<number>(10)
    // 定义医生列表状态
    let [doctorList, setDoctorList] = useState<IDoctorList>([])
    const columns: ColumnsType<IDoctorItem> = [
        {
            title: '序号',
            render(value:any,row:any,index:number){
                return (index + 1);
            }
        },
        {
            title: '职称',
            dataIndex:'title'
        },
        {
            title: '号源时间',
            dataIndex:'workDate'
        },
        {
            title: '总预约数',
            dataIndex:'reservedNumber'
        },
        {
            title: '剩余预约数',
            dataIndex:'availableNumber'
        },
        {
            title: '挂号费(元)',
            dataIndex:'amount'
        },
        {
            title: '擅长技能',
            dataIndex:'skill'
        }
    ]

    async function _getDepartmentList() {
        let res = await getDepartmentList(hoscode as string);
        // 设置科室节点禁用状态
        res = res.map(department => { // department都是一级科室
            department.disabled = true;
            return department
        })
        // 设置一级科室展开状态
        console.log('res: ', res);
        let depcodes = res.map(item => item.depcode);
        setExpandedKeys(depcodes)
        // 设置状态
        setDepartmentList(res);
        // 设置科室code 和 科室名状态
        let depcode = (res[0].children as IDepartmentList)[0].depcode
        let depname = (res[0].children as IDepartmentList)[0].depname
        setDepcode(depcode)
        setDepname(depname)
    }
    /**
     * 点击节点，切换科室
     * @param a 
     * @param info 
     */
    function onSelect(a: any, info: any) {
        // console.log('a:', a);
        console.log('info:', info);
        setDepcode(info.node.depcode);
        setDepname(info.node.depname);
    }
    // 获取排班日期分页数据并设置状态
    async function _getScheduleList() {
        let { bookingScheduleList, total, baseMap: { hosname } } = await getScheduleList(page, limit, hoscode as string, depcode as string)
        // console.log('scheduleList: ', bookingScheduleList, total, hosname);

        setTotal(total);
        setHosname(hosname)
        setScheduleList(bookingScheduleList)
        
        // 默认让第一个日期是被选中的
        bookingScheduleList[0]?.workDate && setWorkDate(bookingScheduleList[0].workDate)
    }

    async function _getDoctorList(){
        let res = await getDoctorList(hoscode as string, depcode as string, workDate as string)
        console.log('doctorList : ', res);
        setDoctorList(res);
    }
    useEffect(() => {
        _getDepartmentList()
    }, [])

    useEffect(() => {
        depcode && _getScheduleList()
    }, [depcode,page,limit])

    useEffect(()=>{
        (depcode && workDate) && _getDoctorList()
    },[depcode, workDate])

    return (
        <Card>
            <div>选择：民航总医院 / 多发性硬化专科门诊 / 2023-05-28</div>
            <Row className='mt' gutter={30}>
                <Col span={5}>
                    <div style={{ border: '1px solid #ddd', overflowY: 'scroll', height }}>
                        <Tree
                            // 配置tree组件字段的映射
                            fieldNames={{
                                title: 'depname',
                                key: 'depcode'
                            }}
                            onSelect={onSelect}
                            treeData={departmentList as []}
                            // 展开的节点
                            expandedKeys={expandedKeys}
                            // 默认选中的节点
                            selectedKeys={[depcode as string]}
                        />
                    </div>
                </Col>
                <Col span={19}>
                    <Space>

                        {scheduleList.map((item, index) => (
                            <Tag key={index} color={workDate===item.workDate ? 'green' : ''}>
                                <div>{item.workDate} {item.dayOfWeek}</div>
                                <div>{item.availableNumber} / {item.reservedNumber}</div>
                            </Tag>
                        ))}


                    </Space>
                    <Pagination
                        className="mt"
                        current={page}
                        pageSize={limit}
                        total={total}
                        onChange={(page:number, pageSize:number)=>{
                            setPage(page)
                            setLimit(pageSize)
                        }}
                    />
                    <Table
                        rowKey={'id'}
                        className="mt"
                        columns={columns}
                        dataSource={doctorList}
                        pagination={false}
                    />
                    <Button className='mt'>返回</Button>
                </Col>
            </Row>
        </Card>
    )
}
